<template>
  <div>
    <div class="head">
      <h1 class="title">医生评价</h1>
    </div>
    <el-main>
      <el-card>
        <div class="doctor-info">
          <el-avatar :src="avatar" size="large"></el-avatar>
          <div class="doctor-details">
            <h3>{{ doctor.name }} {{ getGender(doctor.gender) }}</h3>
            <p>{{ doctor.specialty }}</p>
          </div>
          <p class="average">平均评分: 
            <el-rate 
              v-model="averageRating"
              disabled
              show-score
              text-color="#ff9900"
              ></el-rate>
          </p>
        </div>
      </el-card>
      <el-divider></el-divider>
      <el-card v-for="(review, index) in reviews" :key="index" class="review-card">
        <div class="review-header">
          <!-- <el-avatar :src="review.avatar"></el-avatar> -->
          <el-text style="margin-left: 20px;">患者 {{ review.patientId }}</el-text>
          <div class="review-info">
            <el-rate v-model="review.rating" disabled show-score text-color="#ff9900"></el-rate>
          </div>
        </div>
        <div class="review-content">
          <el-text>{{ review.content }}</el-text>
        </div>
        <el-text style="margin-left: auto;">{{ review.reviewTime }}</el-text>
      </el-card>
    </el-main>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ReviewPage',
  data() {
    return {
      avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      doctor: {
        userId: 0,
        name: '李世民',
        age: 35,
        gender: 1,
        specialty: '肛肠科专家',
      },
      reviews: [
        {
          reviewId: 0,
          patientId: 0,
          doctorId: 0,
          reviewTime: 0,
          rating: 0,
          content: "good"
        }
      ]
    };
  },
  mounted() {
    this.fetchJudges();
  },
  computed: {
    // 计算平均评分
    averageRating() {
      const t = this.reviews.reduce((accumulator, review) => {
        return accumulator + review.rating;
      }, 0);
      const average = t / this.reviews.length;
      console.log(average);
      return average;
    }
  },
  methods: {
    // 获取医生的所有评价
    fetchJudges() {
      //先查医生信息
      axios.get(`http://localhost:8085/api/doctor/id/${this.$store.state.id}`)
        .then(response => {
          console.log(response);
          this.doctor = response.data.data;
        })
      //查询评价
      axios.get('http://localhost:8085/api/review/getByDoctorId', {
        params: {
          id: this.$store.state.id
        }
      })
        .then(response => {
          console.log(response);
          this.reviews = response.data;
          console.log(this.reviews);
        })
    },
    // 获取性别信息
    getGender(gender) {
      console.log(gender);
      if(gender[0] == 1){
        return '男';
      }else if(gender[0] == 0){
        return '女';
      }
    }
  }
};
</script>

<style scoped>
.title {
  text-align: left;
  margin: 0 0 20px 0;
}

.doctor-info {
  display: flex;
  align-items: center;
}

.doctor-details {
  margin-left: 20px;
}

.average {
  margin-left: auto;
}
.review-card {
  margin-top: 20px;
}

.review-header {
  display: flex;
  align-items: center;
}

.review-info {
  margin-left: auto;
}

.review-content {
  margin-top: 10px;
  text-align: left;
}
</style>
